<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>编辑自定义积分赠送</title>
<link rel="stylesheet" href="__PUBLIC__/css/pintuer.css">
<link rel="stylesheet" href="__PUBLIC__/css/admin.css">
<script src="__PUBLIC__/js/jquery.js"></script>
<script src="__PUBLIC__/js/pintuer.js"></script>
<script>
    var data = {$datajson};
</script>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong><span class="icon-key"></span><if condition="$id eq true">修改<else />添加</if>自定义积分赠送</strong></div>
  <div class="body-content">
    <form method="get" class="form-x" action="__URL__/setHandleIntergral" id="form">
      <div class="form-group">
        <div class="label">
          <label>年份：</label>
        </div>
        <div class="field">
          <select name="year" id="years"  class="select selectChange" style="width: 25%">
              <option value="">请选择年份</option>
          </select>
          <div class="tips"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label>月份：</label>
        </div>
        <div class="field">
          <select name="moth" id="moth"  class="select selectChange" style="width: 25%">
            <option value="">请选择月</option>
            <volist name="mothlist" id="it">
                <option value="{$it.v}" <if condition="$it.v eq $moth">selected</if> >{$it.item}月</option>
            </volist>
          </select>
          <div class="tips"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label>当前月份时间断：</label>
        </div>
        <div class="field">
          <select name="day_start" id="day_start" class="select selectChange"  style="width: 12%;float: left;margin-right: 1%">
            <option value="">开始日</option>
          </select>
          <select name="day_end" id="day_end" class="select selectChange"  style="width: 12%">
          <option value="" >终止日</option>
        </select>
          <div class="tips"></div>
        </div>
      </div>


      <div class="form-group">
        <div class="label">
          <label>赠送积分比：</label>
        </div>
        <div class="field">
          <input type="text" name="ratio" id="ratio" class="input" value="{$data.ratio}" style="width: 25%">
          <div class="tips"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label>赠送积分比：</label>
        </div>
        <div class="field" style="padding-top: .5rem">
          <input type="checkbox" name="run_state" class="checkbox" value="1"  style="float:left" <if condition="$data.run_state eq 1">checked</if> />
          启用中
          <div class="tips"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <input type="hidden" name="id" value="{$id}">
          <input class="button bg-main icon-check-square-o" type="submit"  value="提交" />    
        </div>
      </div>      
    </form>
  </div>
</div>
<script>


    !(function ($) {
        //监听下拉改变
        $('.selectChange').on('change',function () {
            var v = $(this).val();
            v && $(this).removeClass('border-red');
        });
        //添加年份
        function years(el) {
            var year=new Date().getFullYear();    //年
            var yearslist = document.createDocumentFragment();

            for(var i= -2, len = 2 ; i<=len;i++) {
                var dom       = document.createElement('option');
                dom.value     = year + i;
                dom.innerHTML = year + i;
                if(dom.value == year) dom.selected = true;
                yearslist.appendChild(dom);
            }
            el.append(yearslist);
        }

        years($("#years"));

        //获取天数
        function getDays(y,m){

            var days ;
            if(!m) return 0;
            //当月份为二月时，根据闰年还是非闰年判断天数
            if(m == 2){
                days= y % 4 == 0 ? 29 : 28;
            }
            else if(m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12){
                days= 31;
            }
            else{
                days= 30;

            }
            return days;
        }

        //添加日
        function setDay(el,days,text,select) {
            var input = document.createDocumentFragment();
            var def   = document.createElement('option');
            def.innerHTML = text;
            input.appendChild(def);
            for(var i= 1, len = days ; i<=len;i++) {
                var dom       = document.createElement('option');
                dom.value     = i;
                dom.innerHTML = i;
                if(select && select == i) {
                    dom.selected = true;
                }
                input.appendChild(dom);
            }
            el.html('').append(input);
        }
        
        function addDay() {
            var y = $("#years").val();
            var m = $('#moth').val();
            var d = getDays(y,m);
            var select_start  = "{$data.day_start}" ;
            var select_end    = "{$data.day_end}" ;
            setDay($('#day_start'),d,'开始日',select_start);
            setDay($('#day_end'),d,'终止日',select_end);
        }

        $('#moth').on('change',addDay);
        //初始化选中天数
        if($('#moth').val()){
            addDay();
        }

        //监听开始日期变化
        $('#day_start').on('change',function () {
            var v = $(this).val();
            if(v){
                disableOption($('#day_end option'),v);
                $('#day_end option').first().get(0).selected = true;
            }
        });
        //监听结束日期变化
        $('#day_end').on('change',function () {
            var v = $('#day_start').val();
            if(!Number(v)){
                $('#day_end option').first().get(0).selected = true;
                alert("请先选择开始日期");
            }
        });

        //禁止option可选
        function disableOption(el,v) {
            el.each(function () {
                var t = Number(this.value);
                if(t && t < v) {
                    this.disabled = true;
                }else{
                    this.disabled = false;
                }
            })
        }


        //检查表单是否可提交
        function checkform() {
            var years      = $('#years');
            var moth      = $('#moth');
            var day_start = $('#day_start');
            var day_end   = $('#day_end');
            var ratio     = $('#ratio');
            var years_state,moth_state,day_start_state,day_end_state,ratio_state;

            !years.val() ? years.addClass('border-red') : years.removeClass('border-red') && (years_state = true);
            !moth.val() ? moth.addClass('border-red') : moth.removeClass('border-red') && (moth_state = true);
            !day_start.val() ? day_start.addClass('border-red') : day_start.removeClass('border-red') && (day_start_state = true);
            !day_end.val() ? day_end.addClass('border-red') : day_end.removeClass('border-red') && (day_end_state = true);
            isNaN(ratio.val() || 'a') ? ratio.addClass('border-red') : ratio.removeClass('border-red') && (ratio_state = true);

            return years_state && moth_state && day_start_state && day_end_state && ratio_state
        }
        
        //提交检查
        $('#form').on('submit',function () {
            var state = checkform();
            if(state) {
                return true;
            }
            return false;
        })


        


    })(jQuery);
</script>
</body>

</html>